<template>
  <div class="activity-container">
    <h2>校园活动</h2>
    
    <el-tabs v-model="activeTab">
      <el-tab-pane label="活动列表" name="list">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最新活动</span>
              <div class="header-actions">
                <el-select v-model="categoryFilter" placeholder="活动类型" style="width: 150px; margin-right: 10px;" @change="filterActivities">
                  <el-option label="全部类型" value="all"></el-option>
                  <el-option label="学术讲座" value="academic"></el-option>
                  <el-option label="文艺活动" value="culture"></el-option>
                  <el-option label="体育赛事" value="sports"></el-option>
                  <el-option label="志愿服务" value="volunteer"></el-option>
                </el-select>
                <el-input
                  v-model="searchKeyword"
                  placeholder="搜索活动..."
                  style="width: 200px; margin-right: 10px;"
                  clearable
                  @clear="searchActivities"
                  @keyup.enter="searchActivities">
                  <template #prefix>
                    <el-icon><Search /></el-icon>
                  </template>
                </el-input>
                <el-button type="primary" @click="searchActivities">搜索</el-button>
              </div>
            </div>
          </template>
          
          <el-row :gutter="20">
            <el-col :span="8" v-for="activity in filteredActivities" :key="activity.id">
              <el-card class="activity-card" shadow="hover">
                <div class="activity-image">
                  <img :src="activity.image" :alt="activity.title">
                </div>
                <div class="activity-content">
                  <div class="activity-tags">
                    <el-tag :type="getCategoryType(activity.category)" size="small">
                      {{ getCategoryName(activity.category) }}
                    </el-tag>
                    <el-tag :type="activity.status === '报名中' ? 'success' : 'info'" size="small">
                      {{ activity.status }}
                    </el-tag>
                  </div>
                  <h3 class="activity-title">{{ activity.title }}</h3>
                  <div class="activity-meta">
                    <div class="meta-item">
                      <el-icon><Calendar /></el-icon>
                      {{ activity.date }}
                    </div>
                    <div class="meta-item">
                      <el-icon><Location /></el-icon>
                      {{ activity.location }}
                    </div>
                    <div class="meta-item">
                      <el-icon><User /></el-icon>
                      {{ activity.participants }}/{{ activity.limit }}
                    </div>
                  </div>
                  <div class="activity-description">
                    {{ activity.description }}
                  </div>
                  <div class="activity-actions">
                    <el-button 
                      type="primary" 
                      size="small" 
                      @click="viewActivityDetail(activity)"
                      :disabled="activity.status === '已结束'">
                      {{ activity.status === '已结束' ? '已结束' : '查看详情' }}
                    </el-button>
                    <el-button 
                      size="small" 
                      @click="applyActivity(activity)" 
                      :disabled="activity.status !== '报名中'"
                      :type="activity.applied ? 'success' : 'default'">
                      {{ activity.applied ? '已报名' : (activity.status === '报名中' ? '立即报名' : '报名已截止') }}
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            @current-change="handlePageChange"
            class="pagination">
          </el-pagination>
        </el-card>
      </el-tab-pane>
      
      <el-tab-pane label="我的报名" name="myApplications">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>我的活动报名</span>
              <el-button @click="refreshApplications">刷新</el-button>
            </div>
          </template>
          
          <el-table :data="myApplications" style="width: 100%" v-loading="loading">
            <el-table-column prop="title" label="活动名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="category" label="类型" width="120">
              <template #default="scope">
                <el-tag :type="getCategoryType(scope.row.category)" size="small">
                  {{ getCategoryName(scope.row.category) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="活动时间" width="180"></el-table-column>
            <el-table-column prop="location" label="活动地点" width="150"></el-table-column>
            <el-table-column prop="applyTime" label="报名时间" width="180"></el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template #default="scope">
                <el-tag :type="getApplicationStatusType(scope.row.status)">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template #default="scope">
                <el-button size="small" @click="viewActivityDetail(scope.row)">详情</el-button>
                <el-button 
                  v-if="scope.row.status === '报名成功' && scope.row.canCancel" 
                  size="small" 
                  type="danger" 
                  @click="cancelApplication(scope.row)">
                  取消报名
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <el-pagination
            layout="prev, pager, next"
            :total="applicationTotal"
            :page-size="applicationPageSize"
            @current-change="handleApplicationPageChange"
            class="pagination">
          </el-pagination>
        </el-card>
      </el-tab-pane>
      
      <el-tab-pane label="活动回顾" name="review">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>往期活动回顾</span>
            </div>
          </template>
          
          <el-row :gutter="20">
            <el-col :span="8" v-for="review in activityReviews" :key="review.id">
              <el-card class="review-card" shadow="hover">
                <div class="review-image">
                  <img :src="review.image" :alt="review.title">
                </div>
                <div class="review-content">
                  <h3 class="review-title">{{ review.title }}</h3>
                  <div class="review-meta">
                    <div class="meta-item">
                      <el-icon><Calendar /></el-icon>
                      {{ review.date }}
                    </div>
                    <div class="meta-item">
                      <el-icon><User /></el-icon>
                      {{ review.participants }}人参与
                    </div>
                  </div>
                  <div class="review-stats">
                    <div class="stat-item">
                      <el-icon><Star /></el-icon>
                      {{ review.likes }}点赞
                    </div>
                    <div class="stat-item">
                      <el-icon><ChatLineSquare /></el-icon>
                      {{ review.comments }}评论
                    </div>
                  </div>
                  <div class="review-actions">
                    <el-button size="small" @click="viewReviewDetail(review)">
                      查看详情
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    
    <!-- 活动详情对话框 -->
    <el-dialog v-model="detailDialogVisible" :title="selectedActivity.title" width="60%">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="activity-detail-info">
            <div class="info-item">
              <label>活动类型：</label>
              <el-tag :type="getCategoryType(selectedActivity.category)">
                {{ getCategoryName(selectedActivity.category) }}
              </el-tag>
            </div>
            <div class="info-item">
              <label>活动时间：</label>
              <span>{{ selectedActivity.date }}</span>
            </div>
            <div class="info-item">
              <label>活动地点：</label>
              <span>{{ selectedActivity.location }}</span>
            </div>
            <div class="info-item">
              <label>报名情况：</label>
              <span>{{ selectedActivity.participants }}/{{ selectedActivity.limit }}人</span>
            </div>
            <div class="info-item">
              <label>活动状态：</label>
              <el-tag :type="selectedActivity.status === '报名中' ? 'success' : 'info'">
                {{ selectedActivity.status }}
              </el-tag>
            </div>
            <div class="info-item">
              <label>活动详情：</label>
              <div class="activity-detail" v-html="selectedActivity.content"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="activity-image-large">
            <img :src="selectedActivity.image" :alt="selectedActivity.title">
          </div>
        </el-col>
      </el-row>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button 
            type="primary" 
            @click="applyActivity(selectedActivity)" 
            :disabled="selectedActivity.status !== '报名中'"
            v-if="!selectedActivity.applied">
            立即报名
          </el-button>
          <el-button 
            type="success" 
            disabled
            v-if="selectedActivity.applied">
            已报名
          </el-button>
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 活动回顾详情对话框 -->
    <el-dialog v-model="reviewDialogVisible" :title="selectedReview.title" width="60%">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="review-detail-info">
            <div class="info-item">
              <label>活动时间：</label>
              <span>{{ selectedReview.date }}</span>
            </div>
            <div class="info-item">
              <label>参与人数：</label>
              <span>{{ selectedReview.participants }}人</span>
            </div>
            <div class="info-item">
              <label>活动总结：</label>
              <div class="review-detail" v-html="selectedReview.content"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="review-image-large">
            <img :src="selectedReview.image" :alt="selectedReview.title">
          </div>
        </el-col>
      </el-row>
      
      <div class="review-interaction">
        <div class="interaction-stats">
          <el-button type="primary" plain @click="likeReview">
            <el-icon><Star /></el-icon>
            点赞 {{ selectedReview.likes }}
          </el-button>
          <el-button @click="commentReview">
            <el-icon><ChatLineSquare /></el-icon>
            评论 {{ selectedReview.comments }}
          </el-button>
        </div>
        
        <div class="comments-section">
          <h4>精彩评论</h4>
          <div class="comment-list">
            <div class="comment-item" v-for="comment in reviewComments" :key="comment.id">
              <div class="comment-author">
                <el-avatar :src="comment.avatar" size="small"></el-avatar>
                <span class="author-name">{{ comment.author }}</span>
                <span class="comment-time">{{ comment.time }}</span>
              </div>
              <div class="comment-content">
                {{ comment.content }}
              </div>
            </div>
          </div>
          
          <div class="comment-input">
            <el-input
              v-model="commentContent"
              type="textarea"
              :rows="3"
              placeholder="请输入您的评论...">
            </el-input>
            <div style="margin-top: 10px; text-align: right;">
              <el-button type="primary" @click="submitComment">发表评论</el-button>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reviewDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { Search, Calendar, Location, User, Star, ChatLineSquare } from '@element-plus/icons-vue'

export default {
  name: 'Activities',
  components: {
    Search,
    Calendar,
    Location,
    User,
    Star,
    ChatLineSquare
  },
  data() {
    return {
      activeTab: 'list',
      categoryFilter: 'all',
      searchKeyword: '',
      loading: false,
      activities: [
        {
          id: 1,
          title: '人工智能前沿技术讲座',
          category: 'academic',
          date: '2024-10-25 14:00-16:00',
          location: '图书馆报告厅',
          participants: 85,
          limit: 100,
          status: '报名中',
          applied: false,
          description: '邀请业界专家分享人工智能最新发展趋势和应用案例',
          content: '<p>本次讲座将围绕人工智能的最新发展动态，深入探讨AI在各个领域的应用前景。</p><p>主讲嘉宾：</p><ul><li>张教授 - 人工智能研究院院长</li><li>李博士 - 知名AI企业技术总监</li></ul><p>讲座内容：</p><ol><li>AI技术发展现状</li><li>深度学习最新进展</li><li>AI在医疗、教育等领域的应用</li><li>未来发展趋势展望</li></ol>',
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          id: 2,
          title: '校园歌手大赛',
          category: 'culture',
          date: '2024-10-30 18:30-21:00',
          location: '学生活动中心',
          participants: 120,
          limit: 150,
          status: '报名中',
          applied: true,
          description: '展示校园音乐才华，寻找最美校园声音',
          content: '<p>校园歌手大赛是学校一年一度的音乐盛事，为广大音乐爱好者提供展示平台。</p><p>比赛环节：</p><ul><li>个人演唱（60%）</li><li>才艺展示（20%）</li><li>即兴表演（20%）</li></ul><p>奖项设置：</p><ul><li>冠军 - 奖杯+奖金1000元</li><li>亚军 - 奖杯+奖金800元</li><li>季军 - 奖杯+奖金500元</li><li>最佳人气奖 - 奖金300元</li></ul>',
          image: 'https://fuss10.elemecdn.com/a/3f/33564985102ebdfde2f6d4659e790jpeg.jpeg'
        },
        {
          id: 3,
          title: '新生篮球联赛',
          category: 'sports',
          date: '2024-11-05 16:00-18:00',
          location: '体育馆篮球场',
          participants: 0,
          limit: 32,
          status: '报名中',
          applied: false,
          description: '新生篮球联赛，展现青春活力与团队协作',
          content: '<p>新生篮球联赛旨在丰富校园体育文化生活，增强新生体质，培养团队精神。</p><p>比赛规则：</p><ul><li>以学院为单位组队</li><li>每队限报10人</li><li>比赛采用淘汰制</li><li>比赛规则参照国际篮联规则</li></ul><p>奖项设置：</p><ul><li>冠军队伍 - 奖杯+奖金2000元</li><li>亚军队伍 - 奖杯+奖金1500元</li><li>季军队伍 - 奖杯+奖金1000元</li></ul>',
          image: 'https://fuss10.elemecdn.com/1/34/19aa2272d3e54056b7a6571077117jpeg.jpeg'
        },
        {
          id: 4,
          title: '社区志愿服务',
          category: 'volunteer',
          date: '2024-10-20 09:00-12:00',
          location: '周边社区',
          participants: 30,
          limit: 30,
          status: '已结束',
          applied: false,
          description: '走进社区，关爱老人，传递温暖',
          content: '<p>本次志愿服务活动走进周边社区，为老人们提供生活帮助和精神陪伴。</p><p>服务内容：</p><ul><li>帮助老人打扫卫生</li><li>陪老人聊天谈心</li><li>协助社区整理资料</li><li>为老人表演节目</li></ul><p>活动意义：</p><p>通过此次活动，同学们增强了社会责任感，体会了奉献的快乐，也弘扬了中华民族尊老爱老的传统美德。</p>',
          image: 'https://fuss10.elemecdn.com/0/6f/4d6d8d7d8d7d8d7d8d7d8d7d8d7d8jpeg.jpeg'
        }
      ],
      total: 100,
      pageSize: 6,
      currentPage: 1,
      myApplications: [
        {
          id: 1,
          title: '校园歌手大赛',
          category: 'culture',
          date: '2024-10-30 18:30-21:00',
          location: '学生活动中心',
          applyTime: '2024-10-20 15:30',
          status: '报名成功',
          canCancel: true
        },
        {
          id: 2,
          title: '社区志愿服务',
          category: 'volunteer',
          date: '2024-10-20 09:00-12:00',
          location: '周边社区',
          applyTime: '2024-10-18 10:15',
          status: '已完成',
          canCancel: false
        }
      ],
      applicationTotal: 50,
      applicationPageSize: 10,
      applicationCurrentPage: 1,
      activityReviews: [
        {
          id: 1,
          title: '2024迎新晚会',
          date: '2024-09-15',
          participants: 1200,
          likes: 256,
          comments: 89,
          content: '<p>2024年迎新晚会在热烈的掌声中圆满落幕。</p><p>晚会亮点：</p><ul><li>节目精彩纷呈，歌舞、相声、小品应有尽有</li><li>新生才艺展示环节备受好评</li><li>师生同台，气氛热烈</li><li>现场互动环节趣味十足</li></ul><p>此次晚会不仅展现了同学们的多才多艺，也促进了新老生之间的交流，为新生尽快融入校园生活起到了积极作用。</p>',
          image: 'https://fuss10.elemecdn.com/9/bb/aa6e0bed9a5c4a3c84f518e2e0c4fjpeg.jpeg'
        },
        {
          id: 2,
          title: '校园文化节',
          date: '2024-05-20',
          participants: 800,
          likes: 189,
          comments: 65,
          content: '<p>为期一周的校园文化节在欢声笑语中落下帷幕。</p><p>活动回顾：</p><ul><li>各类社团展示精彩纷呈</li><li>美食节受到师生热捧</li><li>文化讲座座无虚席</li><li>文艺演出高潮迭起</li></ul><p>文化节不仅丰富了校园文化生活，也展现了学校浓厚的人文氛围和同学们的青春活力。</p>',
          image: 'https://fuss10.elemecdn.com/9/bb/aa6e0bed9a5c4a3c84f518e2e0c4fjpeg.jpeg'
        }
      ],
      detailDialogVisible: false,
      reviewDialogVisible: false,
      selectedActivity: {},
      selectedReview: {},
      commentContent: '',
      reviewComments: [
        {
          id: 1,
          author: '张同学',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          time: '2024-09-16 10:30',
          content: '晚会太精彩了！特别是那个小品，笑得我肚子疼！'
        },
        {
          id: 2,
          author: '李同学',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          time: '2024-09-16 14:20',
          content: '感谢学校组织这么棒的活动，让我们新生感受到了家的温暖。'
        }
      ]
    }
  },
  computed: {
    filteredActivities() {
      let result = this.activities
      
      // 按分类过滤
      if (this.categoryFilter !== 'all') {
        result = result.filter(activity => activity.category === this.categoryFilter)
      }
      
      // 按关键字搜索
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase()
        result = result.filter(activity => 
          activity.title.toLowerCase().includes(keyword) || 
          activity.description.toLowerCase().includes(keyword)
        )
      }
      
      // 分页处理
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return result.slice(start, end)
    }
  },
  methods: {
    getCategoryName(category) {
      const categoryMap = {
        'academic': '学术讲座',
        'culture': '文艺活动',
        'sports': '体育赛事',
        'volunteer': '志愿服务'
      }
      return categoryMap[category] || '未知类型'
    },
    getCategoryType(category) {
      const typeMap = {
        'academic': 'primary',
        'culture': 'success',
        'sports': 'warning',
        'volunteer': 'info'
      }
      return typeMap[category] || 'info'
    },
    getApplicationStatusType(status) {
      const typeMap = {
        '报名成功': 'success',
        '已完成': 'info',
        '已取消': 'danger'
      }
      return typeMap[status] || 'info'
    },
    filterActivities() {
      this.currentPage = 1
    },
    searchActivities() {
      this.currentPage = 1
    },
    handlePageChange(page) {
      this.currentPage = page
    },
    handleApplicationPageChange(page) {
      this.applicationCurrentPage = page
      this.loading = true
      // 模拟分页加载
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    viewActivityDetail(activity) {
      this.selectedActivity = activity
      this.detailDialogVisible = true
    },
    applyActivity(activity) {
      if (activity.status !== '报名中') {
        this.$message.warning('报名已截止')
        return
      }
      
      if (activity.applied) {
        this.$message.info('您已报名该活动')
        return
      }
      
      this.$confirm(`确定要报名参加《${activity.title}》吗？`, '报名确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        activity.applied = true
        activity.participants++
        this.$message.success('报名成功！')
        this.detailDialogVisible = false
      }).catch(() => {
        // 取消操作
      })
    },
    cancelApplication(application) {
      this.$confirm(`确定要取消报名《${application.title}》吗？`, '取消报名', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        application.status = '已取消'
        this.$message.success('取消报名成功')
      }).catch(() => {
        // 取消操作
      })
    },
    refreshApplications() {
      this.loading = true
      // 模拟刷新数据
      setTimeout(() => {
        this.loading = false
        this.$message.success('刷新成功')
      }, 500)
    },
    viewReviewDetail(review) {
      this.selectedReview = review
      this.reviewDialogVisible = true
    },
    likeReview() {
      this.selectedReview.likes++
      this.$message.success('点赞成功')
    },
    commentReview() {
      // 聚焦到评论框
      this.$nextTick(() => {
        document.querySelector('.comment-input textarea').focus()
      })
    },
    submitComment() {
      if (!this.commentContent.trim()) {
        this.$message.warning('请输入评论内容')
        return
      }
      
      const newComment = {
        id: this.reviewComments.length + 1,
        author: '我',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        time: new Date().toLocaleString(),
        content: this.commentContent
      }
      
      this.reviewComments.unshift(newComment)
      this.selectedReview.comments++
      this.commentContent = ''
      this.$message.success('评论发表成功')
    }
  }
}
</script>

<style scoped>
.activity-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
}

.activity-card {
  margin-bottom: 20px;
}

.activity-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.activity-content {
  padding: 15px 0;
}

.activity-tags {
  margin-bottom: 10px;
}

.activity-tags .el-tag {
  margin-right: 5px;
}

.activity-title {
  margin: 10px 0;
  color: #303133;
  font-size: 16px;
}

.activity-meta {
  margin-bottom: 10px;
  font-size: 14px;
  color: #909399;
}

.meta-item {
  margin-bottom: 5px;
}

.meta-item .el-icon {
  margin-right: 5px;
}

.activity-description {
  margin-bottom: 15px;
  color: #606266;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-actions .el-button {
  margin-right: 10px;
}

.review-card {
  margin-bottom: 20px;
}

.review-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.review-content {
  padding: 15px 0;
}

.review-title {
  margin: 10px 0;
  color: #303133;
  font-size: 16px;
}

.review-meta,
.review-stats {
  margin-bottom: 10px;
  font-size: 14px;
  color: #909399;
}

.stat-item {
  display: inline-block;
  margin-right: 15px;
}

.stat-item .el-icon {
  margin-right: 5px;
}

.activity-detail-info .info-item,
.review-detail-info .info-item {
  margin-bottom: 15px;
}

.activity-detail-info .info-item label,
.review-detail-info .info-item label {
  font-weight: bold;
  color: #909399;
  margin-right: 10px;
}

.activity-detail,
.review-detail {
  line-height: 1.8;
  color: #303133;
}

.activity-image-large img,
.review-image-large img {
  width: 100%;
  border-radius: 4px;
}

.review-interaction {
  margin-top: 20px;
}

.interaction-stats .el-button {
  margin-right: 10px;
}

.comment-list {
  margin: 20px 0;
  max-height: 300px;
  overflow-y: auto;
}

.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #e4e7ed;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-author {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.author-name {
  margin: 0 10px;
  font-weight: bold;
}

.comment-time {
  color: #909399;
  font-size: 12px;
}

.comment-content {
  color: #303133;
  line-height: 1.5;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>